<%@ page import="java.util.List" %>
<%@ page import="com.bjpowernode.crm.settings.domain.DictionaryType" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";


//java脚本
	// List<DictionaryType> dictionaryTypes = (List<DictionaryType>) request.getAttribute("modelAndView");


%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--导入标签库 JSTL--%>


<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script>

	$(function () {

		/*$("#qx").click(function () {

			//取得遍历出来的元素的普通的复选框
			//input[name=xz]:选的是所有name=xz的input
			//使用jquery对象，可以当作dom对象的数组来使用，我们可以通过length属性得到dom的个数
			/!*

                jquery对象如何转换为js对象
                    最常用的一种方式就是以操作数组下标的形式来取得js对象
                    jquery[i]

                js对象如何转换为jquery对象
                    如果我们在实际项目的操作中，我们得到的是js对象，
                    但是操作js对象比较麻烦，所以就可以将js对象转换为jquery对象来简化前端的开发工作
                    $(dom)


             *!/

			/!*

                全选操作实现方式1：将每一个复选框遍历出来，分别挑勾
                    该方式比较麻烦

            *!/
			/!*var $xz = $("input[name=xz]");

            if($("#qx").prop("checked")){

                //alert("挑勾了");
                for(var i=0;i<$xz.length;i++){

                    //$xz[i]:取得jquery中的每一个dom对象
                    $xz[i].checked = true;

                }


            }else{

                //alert("灭勾了")
                for(var i=0;i<$xz.length;i++){

                    //$xz[i]:取得jquery中的每一个dom对象
                    $xz[i].checked = false;

                }
            }*!/

			//全选操作实现方式2
			//一句代码搞定，以后我们推荐使用该形式
			//this代表的是当前绑定的元素的dom对象
			$("input[name=xz]").prop("checked",this.checked);


		})


		//为普通的复选框绑定事件，操作全选的复选框
		$("input[name=xz]").click(function () {

			$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length)

		})*/
		//为全选绑定事件

		$("#qx").click(function () {


			$("input[name=xz]").prop("checked",this.checked)



		})

		//单选绑定事件 若单选全部则全选挑勾
		$("input[name=xz]").click(function () {
			$("#qx").prop("checked",$("input[name=xz]:checked").length==$("input[name=xz]").length)


		})

		//为修改绑定事件
		$("#edit").click(function () {
			var $xz=$("input[name=xz]:checked");
			if ($xz.length==0){
				alert("请选择需要修改的数据")

			} else if ($xz.length>1){
				alert("请选择一条需要修改的数据")
			} else {
				var code = $xz.val();

				window.location.href="settings/dictionary/type/toEdit.do?code="+code
			} });

		//为删除绑定事件
		$("#deleteTypeBtn").click(function () {
			//集合
			var $xz=$("input[name=xz]:checked");

			if ($xz.length==0){
				alert("请选择需要删除的数据")


			} else {
				
				if (confirm("你确定要删除以下数据吗？")) {

					var flag = "";

					for (var i =0;i<$xz.length;i++){

						flag += "codes=" + $($xz[i]).val();


						if (i<$xz.length-1){
							flag +="&";

						}

					}




					//window.location.href = "settings/dictionary/type/deleteType.do?"+param;

					window.location.href="settings/dictionary/type/deleteType.do?"+flag;

				}
				




			} })



		})
		
		
		
		
		
		
		
		
		
		
		
		












</script>


</head>
<body>

	<div>
		<div style="position: relative; left: 30px; top: -10px;">
			<div class="page-header">
				<h3>字典类型列表</h3>
			</div>
		</div>
	</div>
	<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
		<div class="btn-group" style="position: relative; top: 18%;">
		  <button type="button" class="btn btn-primary"
				  onclick="window.location.href='settings/dictionary/type/toSave.do'"><span
				  class="glyphicon glyphicon-plus"></span> 创建</button>
		  <button type="button" class="btn btn-default" id="edit"
				  <%--onclick="window.location.href='settings/dictionary/type/toEdit.do'"--%>><span
				  class="glyphicon glyphicon-edit" ></span> 编辑</button>
		  <button type="button"  id="deleteTypeBtn" class="btn btn-danger"><span class="glyphicon glyphicon-minus"
															></span> 删除
		  </button>
		</div>
	</div>
	<div style="position: relative; left: 30px; top: 20px;">
		<table class="table table-hover">
			<thead>
				<tr style="color: #B3B3B3;">
	               <%--	全选	                         --%>
					<td><input type="checkbox"  id="qx"/></td>
					<td>序号</td>
					<td>编码</td>
					<td>名称</td>
					<td>描述</td>
				</tr>
			</thead>




			<tbody>




		<c:forEach items="${type}" var="dt" varStatus="vs">

			<tr class="active">
				<td><input type="checkbox" name="xz" value="${dt.code}" /></td>
				<td>${vs.count}</></td>
				<td>${dt.code}</td>
				<td>${dt.name}</td>
				<td>${dt.description}</td>
			</tr>
		</c:forEach>





			<%--<%
				for (int i =0; i<dictionaryTypes.size();i++){
					DictionaryType type=dictionaryTypes.get(i);
					%>

			<tr class="active">
				<td><input type="checkbox" value="<%=type.getCode()%>" /></td>
				<td><%=i+1%></></td>
				<td><%=type.getCode()%></td>
				<td><%=type.getName()%></td>
				<td><%=type.getDescription()%></td>
			</tr>

			%>


				}
				%>

				&lt;%&ndash;<tr class="active">
					<td><input type="checkbox" /></td>
					<td>1</td>
					<td>sex</td>
					<td>性别</td>
					<td>性别包括男和女</td>
				</tr>&ndash;%&gt;--%>
			</tbody>
		</table>
	</div>
	
</body>
</html>



